import { forwardRef, useImperativeHandle, useRef } from "react"

//下面不行
// const Child=()=>{
//   const inputRef=useRef(null)
//   const focusInput=()=>{
//     inputRef?.current?.focus()
//   }

//   return <input ref={inputRef}/>
// }


const Child=forwardRef((props,ref)=>{
  const inputRef=useRef(null);
  //时输入框聚焦
  const focusInput=()=>{
    inputRef?.current?.focus()
  }
  //暴露focusInput方法出去
  useImperativeHandle(ref,()=>{
    return {focusInput}
  })
  return <input type="text" ref={inputRef} />
})

export default function GetDom(){
  const childRef=useRef(null)
  const handleClick=()=>{
    childRef?.current?.focusInput()
  }
  return (
    <>
    <Child ref={childRef}/>
    <button onClick={handleClick}>按钮</button>
    </>
  )
}